import { Story, Canvas } from '@storybook/addon-docs';

# Material Progress

Adding a custom progress bar is easy, in this case let's add Material UI's Linear Progress bar by passing in a `progressComponent`:

```js
import React from 'react';
import doc from './linearProgressBar.mdx';
import { makeStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';
import data from '../../constants/sampleMovieData';
import DataTable from '../../../src/index';

const useStyles = makeStyles(theme => ({
	root: {
		width: '100%',
		'& > * + *': {
			marginTop: theme.spacing(2),
		},
	},
}));

// The Material UI way...
const LinearIndeterminate = () => {
	const classes = useStyles();

	return (
		<div className={classes.root}>
			<LinearProgress />
		</div>
	);
};

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
			progressPending
			progressComponent={<LinearIndeterminate />}
		/>
	);
};
```

<Canvas>
  <Story id="ui-library-material-ui-progress--progress" />
</Canvas>